<!--这个组件用来表示每一个法规的显示-->
<template>
  <div id="outerBox" @mouseenter="onEnterTd" @mouseleave="onLeaveTd" @click="callParentOpen" :style="active">
    <div id="headerBox">
      <div>
        <input type="checkbox" id="inputCheckBox" v-model="lawCont.isSelect" @click="callParentChange" :key="this.lawCont.lawId">
        <label for="inputCheckBox" id="lawTitle">{{lawCont.lawTitle}}</label>
      </div>
      <p class="similarityDiv">相似度：{{lawCont.similarity}}</p>
    </div>
    <div id="contentBox">
      <p id="content">{{displayContent}}</p>
    </div>
    <el-button id="outputButton" @click="onClickDownDaily">
      <img src="../assets/svgs/output.svg" style="width: 16px; height: 12px" alt=""/>导出
    </el-button>
  </div>
</template>

<script>
//这里需要下载一个npm install file-saver --save
import {saveAs} from 'file-saver';
export default {
  name: "LawBox",
  // props: ['lawCont'], // 这里的lawcontent包括5个属性，id（前端赋予），是否选中，发条标题，相似度，以及具体内容
  props:{
    lawCont:{
      lawId:{
        type:Number,
        required:true
      },
      lawContent:{
        type:String,
        required:true
      },
      lawTitle:{
        type:String,
        required:true
      },
      isSelect:{
        type:Boolean,
        default:false //默认为不选中
      },
      similarity:{
        type:Number,
        default:0.666
      }
    }
  },
  data(){
    return{
      active:'',
      // checkFlag : false,
    }
  },
  computed: {
    displayContent(){
      if(this.lawCont.lawContent.length > 55){
        return this.lawCont.lawContent.substring(0, 55) + "..."
      }else{
        return this.lawCont.lawContent
      }
    }
  },
  methods: {
    //鼠标悬浮事件
    onEnterTd(){
      this.active = 'background-color: rgb(240, 248, 255);cursor: pointer;';
    },
    //鼠标悬浮事件
    onLeaveTd(){
      this.active = 'background-color: white;'
    },

    //导出为txt
    onClickDownDaily(event) {
      //阻止点击事件冒泡
      event.stopPropagation();

      var data = this.lawCont.lawTitle + "\r\n\r\n" + this.lawCont.lawContent
      let str = new Blob([data], {type: 'text/plain;charset=utf-8'});
      // 注意这里要手动写上文件的后缀名
      saveAs(str, this.lawCont.lawId + '-' + this.lawCont.lawTitle + `.txt`);
    },

    callParentOpen(){
      // 通过自定义事件boxOnClick把值传给父组件
      this.$emit('boxOnClick', this.lawCont.lawId)
    },

    callParentChange(event){
      //阻止点击事件冒泡
      event.stopPropagation();
      // 通过自定义事件checkChange把值传给父组件, 【注意】点击复选框，若此前已在”我的内规“，发送true，若此前不在”我的内规“，发送false
      console.log(this.lawCont.isSelect);
      this.$emit('checkChange', this.lawCont.lawId, this.lawCont.isSelect)
    }
  },
  mounted() {
    // this.style = 'background-color: rgb(240, 248, 255)'
  },
}
</script>

<style scoped>
#outerBox{
  width: 98%;
  height: 100%;
  /* height: 105px; */
  /* 这里很怪，找了很久也找不到是哪里设了一个magin-left使得list往右边跑，只好在这里margin-left: -40px; */
  margin-left: 1%;
  margin-top: 2.5%;
  border-radius: 10px;
  border: solid 1px gray;
  background-color: white;
  overflow:hidden
}

#headerBox{
  display: flex;
  justify-content: space-between;
  margin: 3px;
}
#inputCheckBox{
  position:relative;
  top: 2px;
  margin-left: 2px
}

.similarityDiv{
  color: rgba(0, 199, 0, 0.74);
  font-size: 13px;
  margin-top: 1%;
  margin-right: 1%;
}

#contentBox{
  margin-left: 5%;
  margin-top: 10px;
  width: 90%;
  height: 70%;
}
#content{
  font-size: 14px;
}


#outputButton{
  position: absolute;
  right: 1%;
  bottom: 2%;
}
</style>
